<template>
  <div>
    <!-- Tab切换 -->
    <div class="tabs" ref="nav">
      <div ref="tabs" v-for="(item, index) in TabList" :key="index" @click="changeTab(index, item.id)"
        :class="{ active: currentIndex === index }">
        {{ item.classname }}
      </div>
    </div>
    <!-- Swiper容器 -->
    <div class="swiper-container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
      <div ref="swiperWrapper" class="swiper-wrapper" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
        <div class="content-big">
        <div class="content-box" v-for="item, index in ContentList" :key="index">
          <div class="content-tab">
            <img :src="item.user.userpic" v-show="item.user.userpic">
            <img src="../assets/image/default.jpg" alt="" v-show="!item.user.userpic">
            <div class="content">
              <p class="p1">{{ item.user.username }}</p>
              <p class="p2">{{ item.create_time }}</p>
            </div>
          </div>
          <p class="content-p">{{ item.content }}</p>
          <img :src="item.titlepic" alt="" class="content-img" v-show="item.titlepic">
          <div class="content-bottom">
            <div class="bottom">
              <i class="iconfont">&#xe613;</i>
              <div class="bottom-content" v-if="!item.ding_count">支持</div>
              <div class="bottom-content" v-else>{{ item.ding_count }}</div>
            </div>
            <div class="bottom">
              <i class="iconfont">&#xe614;</i>
              <div class="bottom-content" v-if="!item.cai_count">反对</div>
              <div class="bottom-content" v-else>{{ item.cai_count }}</div>
            </div>
            <div class="bottom">
              <i class="iconfont">&#xe616;</i>
              <div class="bottom-content" v-if="!item.comment_count">评论</div>
              <div class="bottom-content" v-else>{{ item.comment_count }}</div>
            </div>
            <div class="bottom">
              <i class="iconfont">&#xe653;</i>
              <div class="bottom-content">分享</div>
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    TabList: {
      type: Array,
      required: true
    },
    ContentList: {
      type: Array,
      required: true
    }
  },
  methods() {
    console.log(this.list, 999);
  },
  data() {
    return {
      // tabs: ['Tab 1', 'Tab 2', 'Tab 3'],
      currentIndex: 0,
      startX: 0,
      moveX: 0,
      isTouching: false,

    };
  },
  methods: {
    changeTab(index) {
      // 切换Tab时更新当前索引
      this.currentIndex = index;
      this.$emit('changeTab', this.currentIndex + 1)
      // 计算滚动位置以使单击的选项卡居中
      const nav = this.$refs.nav; // 获取选项卡导航栏的引用
      const tab = this.$refs.tabs[index]; // 获取当前选中的选项卡的引用
      const scrollLeft = tab.offsetLeft - (nav.clientWidth - tab.clientWidth) / 2;  // 计算滚动左侧位置以居中当前选项卡
      nav.scrollLeft = Math.max(0, Math.min(scrollLeft, nav.scrollWidth - nav.clientWidth));  // 设置滚动位置，确保在合理的范围内
    },
    onTouchStart(event) {
      this.isTouching = true;
      this.startX = event.touches[0].clientX;
      this.moveX = 0;
    },
    onTouchMove(event) {
      if (!this.isTouching) return;
      this.moveX = event.touches[0].clientX - this.startX;
    },
    onTouchEnd() {
      if (!this.isTouching) return;
      this.isTouching = false;
      const threshold = 50; // 设置滑动切换的阈值
      if (this.moveX > threshold && this.currentIndex > 0) {
        this.changeTab(this.currentIndex - 1);
      } else if (this.moveX < -threshold && this.currentIndex < this.TabList.length - 1) {
        this.changeTab(this.currentIndex + 1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$width:1
/* 添加一些样式来美化外观 */
.tabs {
  display: flex;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;

  &::-webkit-scrollbar {
    display: none;
  }
}

.tabs div {
  flex: 0 0 auto;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
}

.tabs div.active {
  font-size: 20px;
  color: #FC5C82;
  font-weight: 700;
}

.swiper-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
}

.swiper-wrapper {
  display: flex;
  transition: transform 0.3s ease-in-out;
  .content-big {
  background-color: #f5f5f4;

  .content-box {
    width: 355px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 10px;
    background-color: #fff;

    .content-tab {
      height: 48px;
      margin: auto;
      display: flex;
      align-items: center;
      margin-top: 5px;
      margin-bottom: 5px;

      img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
      }

      .content {
        display: flex;
        flex-direction: column;
        margin-left: 15px;

        .p1 {
          font-size: 15px;
        }

        .p2 {
          font-size: 12px;
          color: #A9A5A0;
        }
      }
    }

    .content-p {
      font-size: 17px;
      margin-top: 5px;
      line-height: 30px;
    }

    .content-img {
      width: $width;
      height: 175px;
      margin-top: 10px;
      max-width: 100%;
      height: auto;
    }

    .content-bottom {
      width: 355px;
      height: 30px;
      display: flex;
      background-color: #fff;
      margin-top: 15px;
      padding-bottom: 15px;
      line-height: 30px;

      .bottom {
        width: 25%;
        display: flex;
        justify-content: center;

        i {
          font-size: 20px;
        }

        .bottom-content {
          font-size: 14px;
          margin-left: 5px;
        }
      }
    }
  }
}
}

.swiper-slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 20px;
  background-color: #f1f1f1;
}
</style>